<template>
  <div id="personal">
    <top-bar :title="title"></top-bar>
    <div class="personalName">
      <md-field>
        <md-input-item ref type="text" v-model="personalName" placeholder="请输入昵称" maxlength="12">
          <md-icon name="nicheng_icon" slot="left"></md-icon>
        </md-input-item>
      </md-field>
      <p class="pwd_text">昵称2～12位汉字、数字、字母的组合</p>
      <p class="rzBtn" @click="setPersonalName">确定</p>
    </div>
  </div>
</template>
<script>
import '@/assets/svgs/nicheng_icon.svg';
import { Icon, Field, FieldItem, Toast, InputItem, Dialog } from 'mand-mobile';
import TopBar from '@/components/TopBar';
import Loading from '@/components/loading';
import { decryptByDESModeEBC, encryptByDESModeEBC } from '@/common/encrypt';
import http from '@/common/http';
export default {
  components: {
    [Icon.name]: Icon,
    [TopBar.name]: TopBar,
    [Field.name]: Field,
    [Toast.name]: Toast,
    [FieldItem.name]: FieldItem,
    [InputItem.name]: InputItem
  },
  data() {
    return {
      title: '设置昵称',
      personalName: localStorage.getItem('nick_name')
    };
  },
  methods: {
    setPersonalName() {
      var reg = /^[\u4e00-\u9fa5_a-zA-Z0-9]+$/;
      if (!this.personalName) {
        Toast({
          content: '请输入昵称',
          duration: 3000,
          hasMask: true
        });
        return false;
      }
      if (this.personalName.length < 2) {
        Toast({
          content: '昵称为2-12位汉字、数字、字母的组合',
          duration: 3000,
          hasMask: true
        });
        return false;
      }
      if (!reg.test(this.personalName)) {
        Toast({
          content: '昵称为2-12位汉字、数字、字母的组合',
          duration: 3000,
          hasMask: true
        });
        return false;
      }
      let str = localStorage.getItem('USER_INFO');
      let userobj = JSON.parse(str);
      var data = {
        tk: userobj.token,
        nick_name: this.personalName
      };
      Loading.show();
      http.post('/pakj/passenger/updateUserInfo', data).then(res => {
        Loading.hide();
        if (res.data.code === '000000') {
          localStorage.setItem('nick_name', res.data.data.nick_name);
          Dialog.alert({
            title: '提示',
            content: '昵称设置成功',
            confirmText: '确定',
            onConfirm: () => {
              this.$router.push({
                name: 'PersonalIndex'
              });
            }
          });
        } else {
          Dialog.alert({
            title: '提示',
            content: res.data.msg,
            confirmText: '确定'
          });
        }
      });
    }
  }
};
</script>
<style lang="stylus" scoped>
p {
  display: block;
  margin-block-start: 0px;
  margin-block-end: 0px;
  margin-inline-start: 0px;
  margin-inline-end: 0px;
}

#personal {
  height: 100vh;
  background-color: color-primary-background;
}

.personalName {
  margin-top: 20px;
}

.pwd_text {
  font-size: 24px;
  color: #999;
  margin-left: 30px;
  margin-top: 10px;
}

.rzBtn {
  height: 98px;
  line-height: 98px;
  font-size: 36px;
  text-align: center;
  background-color: #FF6917;
  color: #fff;
  margin: 140px 20px 0px 20px;
  border-radius: 7px;
}
</style>
